<template>
  <div class="imgCommon" :style="imgCommonStyle">
    <div class="img" :style="imgStyleClass">
      <div class="save-position" :class="{'save' : isSave, 'not-save': !isSave}"
           v-if="isSave !== null && isSave !== undefined" @click="saveClick"/>
      <div class="title" :style="titleStyle" v-if="title !== ''">{{title | shortEllipsis}}</div>
    </div>
    <div class="content" :style="contentStyleClass">
      <div class="contentTitle" v-if="contentTitle !== ''">{{contentTitle | shortEllipsis}}</div>
      <div class="contentContent" v-if="contentContent !== ''">{{contentContent | longEllipsis}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      titlePosition: {
        type: String,
        validator(val) {
          return (
            [
              'up',
              'down',
              'left',
              'right',
              'upLeft',
              'upRight',
              'downLeft',
              'downRight'
            ].indexOf(val) !== -1
          )
        },
        default: 'down'
      },
      imgSrc: {
        type: String,
        default: ''
      },
      imgStyle: {},
      border: {
        type: Boolean,
        default: false
      },
      contentTitle: {
        type: String,
        default: ''
      },
      contentContent: {
        type: String,
        default: ''
      },
      isSave: null,
      id: null
    },
    data() {
      return {
        imgDefaultWidth: '323px',
        imgDefaultHeight: '220px'
      }
    },
    computed: {
      imgCommonStyle() {
        let {imgStyle} = this.$props
        if (imgStyle === undefined) {
          imgStyle = {}
        }
        if (!imgStyle.hasOwnProperty('width')) {
          imgStyle['width'] = this.imgDefaultWidth
        }
        return {
          width: imgStyle['width']
        }
      },
      imgStyleClass() {
        let {imgSrc, imgStyle} = this.$props
        if (imgStyle === undefined) {
          imgStyle = {}
        }
        if (!imgStyle.hasOwnProperty('width')) {
          imgStyle['width'] = this.imgDefaultWidth
        }
        if (!imgStyle.hasOwnProperty('height')) {
          imgStyle['height'] = this.imgDefaultHeight
        }

        return {
          'background-image': `url(` + imgSrc + `)`,
          width: imgStyle['width'],
          height: imgStyle['height']
        }
      },
      titleStyle() {
        let {titlePosition} = this.$props
        switch (titlePosition) {
          case 'up':
            return {
              left: '0px',
              right: '0px'
            }
          case 'left':
            return {
              top: '33%'
            }
          case 'right':
            return {
              top: '33%',
              right: '0px'
            }
          case 'upLeft':
            return {
              left: '0px'
            }
          case 'upRight':
            return {
              right: '0px'
            }
          case 'downLeft':
            return {
              bottom: '0px'
            }
          case 'downRight':
            return {
              bottom: '0px',
              right: '0px'
            }
          default:
            //down
            return {
              right: '0px',
              left: '0px',
              bottom: '0px'
            }
        }
      },
      contentStyleClass() {
        let {border} = this.$props
        if (border) {
          return {
            background: `rgba(255, 255, 255, 1)`,
            'box-shadow': '0px 0px 10px 0px rgba(102,102,102,0.2)'
          }
        }
      }
    },
    methods: {
      saveClick() {
        let {id, isSave} = this.$props
        this.$emit("saveClick", id, isSave)
      }
    },
    filters: {
      longEllipsis(value) {
        if (!value) return ''
        if (value.length > 30) {
          return value.slice(0, 30) + '...' //长度大于10的后面用......代替
        }
        return value
      },
      shortEllipsis(value) {
        if (!value) return ''
        if (value.length > 10) {
          return value.slice(0, 10) + '...' //长度大于10的后面用......代替
        }
        return value
      }
    }
  }
</script>

<style scoped>
  .imgCommon {
    position: relative;
  }

  .img {
    position: relative;
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    background-clip: border-box;
  }

  .title {
    position: absolute;
    padding: 24px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }

  .content {
    padding: 19px 16px 24px 16px;
    box-sizing: border-box;
  }

  .contentTitle {
    text-align: left;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    height: 22px;
  }

  .contentContent {
    height: 44px;
    text-align: left;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(83, 83, 83, 1);
  }

  .save-position {
    position: absolute;
    padding: 15px;
    float: right;
    right: 0;
    margin-top: 10px;
    margin-right: 10px;
    cursor: pointer;
  }

  .save {
    background: url(../../assets/images/like.png) no-repeat 0 0;
    background-size: 100% 100%;
  }

  .not-save {
    background: url(../../assets/images/not-like.png) no-repeat 0 0;
    background-size: 100% 100%;
  }
</style>
